<template>
<span class="overlay-body">
        <span  class="overlay-text prev" id="pref" ref="prev">
                {{ prev }}
        </span>

        <span  class="overlay-text now" ref="now">
                {{ now }}
        </span>
</span>

</template>

<script>


export default {
  name: 'Overlay',
  data() {
    return {
      prev: '',
      now: '',
      duration: 1000, // 持续时间
      keeptime: 1000, // 停留时间
    }
  },
  props: ['text', 'anim'],
  watch: {
    text: {
      handler(val, o) {
        this.update(val);
      },
      immediate: true
    }
  },
  computed: {
    overlayStyle() {
      return {

      };
    },
  },
  methods: {
    update(msg) {
      let prev = this.$refs['prev'];
      d3.select(prev).attr('style', function() {
        return 'opacity:1;transform:translate3d(0px, 0px,0px) rotateY(0deg)';
        // return 'opacity:1;';
      }).transition().delay(0).duration(this.duration-this.keeptime).attr('style', function() {
        return 'opacity:0;transform:translate3d(0px, 0px,400px) rotateY(0deg)'
        // return 'opacity:0;'
      }).on('end', (d, a, doms) => {
        this.prev = this.now+'';
      });

      this.now = msg;
    },
    startTimer(msg) {
      this.messages.push(msg);
    },
    handleAfterLeave() {
      this.$destroy(true);
      this.$el.parentNode.removeChild(this.$el);
    }
  },
  mounted() {
    this.$refs['now']
    // this.startTimer();
  },
}
</script>

<style scoped lang="less">
    .overlay-body{
        display: inline-block;
        position: relative;
        perspective: 1000px;
    }
    .overlay-text{
        transform-style:preserve-3d;
    }
    .now{
        // text-shadow: 0px 0px 1px red
    }
    .prev{
        position: absolute;
        // color: transparent;
        // text-shadow: 0px 0px 1px red;
    }
</style>
